<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script>
        function bigButton(x)
        {

        }

        function normalButton(x)
        {

        }
    </script>
    <link rel="stylesheet" href="./css/button.css">
</head>
<body>

     <button class="btn-mini">
         Mini button
     </button>
     <button class="mini">
         Mini button
     </button>
     <button class="cl">
          Mini button
      </button>
     <button class="btn">
         Mini button
     </button>
    <p>
        <button class="ol">
            Mini button
        </button>
        <button class="zl">
            Mini button
        </button>
        <button class="yl">
            Mini button
        </button>
        <button class="rl">
            Mini button
        </button>
    </p>
    <p>
        <button class="ar">
            Mini button
        </button>
        <button class="br">
            Mini button
        </button>
        <button class="cr">
            Mini button
        </button>
        <button class="dr">
            Mini button
        </button>
    </p>
     <p>
         <button class="cd">
             Mini button
         </button>
         <button class="bd">
             Mini button
         </button>
         <button class="ad alve">
             Mini button
         </button>
         <button class="hd"  onmousemove="bigButton(this)" onmouseout="normalButton(this)" border="0">
             Mini button
         </button>
     </p>

<!--输入框-->

     <div class="o">
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="input-medium big search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="input-medium xl search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="input-medium m search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="input-medium s search-query">
         </form>
     </div>

     <br/>
     <div class="t">
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="medium big search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="medium xl search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="medium m search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="medium s search-query">
         </form>
     </div>

     <br/>
     <div class="h">
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="small big search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="small xl search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="small m search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="small s search-query">
         </form>
     </div>

     <br/>
     <div class="f">
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="lid big search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="lid xl search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="lid m search-query">
         </form>
         <br/>
         <form class="form-search">
             <input type="text" placeholder="请输入…" class="lid s search-query">
         </form>
     </div>
</body>
</html>